import { StyleSheet, View } from "react-native"
import { Header, ObserverButton, ObserverView, TextInput } from "../../../components"
import { SvgLock } from "../../../components/svg"
import { dpw12, dpw16, dpw24, dpw48, NUMBER_OR_LETTER_6_12, USER_INFO } from "../../../constants"
import { useState } from "react"
import { useGlobalStore, useUserInfoStore } from "../../../mobx"
import { UpdatePassword } from "../../../services"
import { observer } from "mobx-react-lite"
import { setItem } from "../../../utils"

const styles = StyleSheet.create({
    box: {
        marginTop: dpw48,
        marginBottom: dpw24,
        paddingHorizontal: dpw16,
    },
    iconbox: {
        position: 'absolute',
        left: -dpw12,
        top: -dpw12,
    },
    submit: {
        marginHorizontal: dpw16
    }
})

const passwordArr = [
    {
        placeholder: 'enterNewPaw',
        name: 'Password',
        maxLength: 12,
        before: <View style={styles.iconbox}><SvgLock scale={0.5} /></View>
    },
    {
        placeholder: 'againEnterPaw',
        name: 'NewPassword',
        maxLength: 12,
        before: <View style={styles.iconbox}><SvgLock scale={0.5} /></View>
    },
]

const EditPsd = ({ navigation }: any) => {
    const [{ NewPassword, Password }, setFormData] = useState({
        NewPassword: '', Password: ''
    })
    const { changeToastKey } = useGlobalStore()
    const { setUserInfo, userInfo } = useUserInfoStore()
    
    const onSubmit = () => {
        if (!Password || NUMBER_OR_LETTER_6_12.test(Password)) {
            changeToastKey('enterCorrectPassward')
            return
        }
        if (!NewPassword || NUMBER_OR_LETTER_6_12.test(NewPassword)) {
            changeToastKey('enterCorrectPassward')
            return
        }
        if (Password !== NewPassword) {
            changeToastKey('againPassward')
            return
        }
        UpdatePassword({
            Password,
            NewPassword
        }).then(() => {
            setItem(USER_INFO, { ...userInfo, Password })
                .then(() => {
                    setUserInfo({ ...userInfo, Password })
                    changeToastKey('updateSucsess')
                }).catch(() => {})
        }).catch((err) => {
            changeToastKey(err?.data.Message)
        })
    }
    
    return (
        <ObserverView style={{ flex:1 }}>
            <Header title="resetPassword" navigation={navigation} isCenter />
            <View style={styles.box}>
                {passwordArr.map((it) => (
                    <TextInput
                        key={it.name}
                        {...it}
                        onChangeText={(text) => {
                            setFormData((p: any) => ({ ...p, [it.name]: text }))
                        }}
                    />
                ))}
            </View>
            <ObserverButton style={styles.submit} tKey="submit" type="primary" onPress={onSubmit} />
        </ObserverView>
    )
}

export default observer(EditPsd)